<template>
   <div class="nav">
       <el-breadcrumb separator="/">
           <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
           <el-breadcrumb-item>{{ goodsType.label }}</el-breadcrumb-item>
       </el-breadcrumb>
       <p class="title">{{goodsType.label}}</p>
       <ul>
           <li v-for="(item, index) in goodsType.children" :key="index" @click="screen(item.value, index)" :class="{checked: isCheck == index}">
               <img src="@/assets/img/common/fangkuai.svg" alt=""> {{ item.label }} </li>
       </ul>
   </div>
</template>

<script>
    import {eventBus} from "../../../common/util";

    export default {
        name: "GoodsClassNav",
        props: {
            goodsType: {
                type: Object,
                default: {}
            }
        },
        data() {
          return {
              isCheck: null
          }
        },
        methods: {
            screen(value, index) {
                eventBus.$emit('screen', value)
                this.isCheck =  index
            }
        }
    }
</script>

<style scoped>
    .nav {
        border-bottom: 1px solid #000000;
        padding: 10px 0 ;
    }
    ul {
        width: 100%;
        list-style: none;
        padding: 2px 25px;
    }
    li {
        cursor:pointer;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
        font-weight: bold;
    }
    li:hover {
        color: rgb(255, 69,3);
    }
    li img {
        width: 11px;
    }
     .title {
        background-color: #000000;
        color: #ffffff;
         text-align: center;
         height: 30px;
        line-height: 30px;
        margin-bottom: 10px;
    }
    .checked {
        color: rgb(255,69,0);
    }

</style>